<template>
  <div>
<a-row style="margin: 0 -12px">
      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
        <av-chart-card :title="$t('app.analysis.total-sales')" total="￥ 189,345">
          <a-tooltip :title="$t('app.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <av-trend style="margin-right: 16px" 
            :term="$t(`app.analysis.week`)" 
            :percent="12" 
            :is-increase="true" 
            :scale="0" />
            <av-trend 
            :term="$t(`app.analysis.day`)" 
            :target="100" 
            :value="89" 
            :scale="0" />
          </div>
          <div slot="footer">{{$t('app.analysis.day-sales')}}<span> ￥234.56</span></div>
        </av-chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
        <av-chart-card :title="$t('app.analysis.visits')" total="￥ 189,345">
          <a-tooltip :title="$t('app.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <av-mini-area color="#975FE4" :data="visitData" />
          </div>
          <div slot="footer">{{$t(`app.analysis.day-visits`)}}<span> 123,4</span></div>
        </av-chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
        <av-chart-card :title="$t(`app.analysis.payments`)" total="￥ 189,345">
          <a-tooltip :title="$t('app.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <av-mini-bar :data="visitData"/>
          </div>
          <div slot="footer">{{$t(`app.analysis.conversion-rate`)}} <span>60%</span></div>
        </av-chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
        <av-chart-card :title="$t(`app.analysis.operational-effect`)" total="73%">
          <a-tooltip :title="$t('app.analysis.introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <av-mini-progress :target="90" :percent="78" color="#13C2C2" height="8px"/>
          </div>
          <div slot="footer">
            <av-trend style="margin-right: 16px" 
            :term="$t(`app.analysis.week`)" 
            :percent="12" 
            :is-increase="true" 
            :scale="0" />
            <av-trend 
            :term="$t(`app.analysis.day`)" 
            :target="100" 
            :value="89" 
            :scale="0" />
          </div>
        </av-chart-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col  :sm="24" :md="24" :xl="24" >
        <a-card :bordered="false" :bodyStyle="{ padding: 0 }">
          <a-tabs 
            size="large" 
            :tabBarStyle="{ marginBottom: 24 }">
            <div slot="tabBarExtraContent">
      <div class="salesExtraWrap">
        <div class="salesExtra">
          <a :class="this.isActive('today')" @click="selectDate('today')">
            {{$t(`app.analysis.all-day`)}}
          </a>
          <a :class="this.isActive('week')" @click="selectDate('week')">
            {{$t(`app.analysis.all-week`)}}
          </a>
          <a :class="this.isActive('month')" @click="selectDate('month')">
            {{$t(`app.analysis.all-month`)}}
          </a>
          <a  :class="this.isActive('year')" @click="selectDate('year')">
            {{$t(`app.analysis.all-year`)}}
          </a>
        </div>
        <a-range-picker :value="rangePickerValue" @change="handleRangePickerChange" :style="{ width: 256 }"/>
      </div>

            </div>
            <a-tab-pane
                :tab="$t(`app.analysis.sales`)"
                key="sales">
                <a-row>
                  <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                    <div class="salesBar">
                      <av-bar
                        :height="295"
                        :title="$t(`app.analysis.sales-trend`)"
                        :data="salesData"
                      />
                    </div>
                  </a-col>
                  <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                    <div class="salesRank">
                      <h4 class="rankingTitle">
                        {{$t(`app.analysis.sales-ranking`)}}
                      </h4>
                      <ul class="rankingList">
                            <li :key='item.title' v-for="(item,i) in rankingListData">
                            <span
                              class="rankingItemNumber"
                              :class="i<3?'active':''"
                            >
                              {{i + 1}}
                            </span>
                            <span class="rankingItemTitle" :title="item.title">
                              {{item.title}}
                            </span>
                            <span class="rankingItemValue">
                              {{$numeral(item.total).format('0,0')}}
                            </span>
                          </li>
                        
                      </ul>
                    </div>
                  </a-col>
                </a-row>
            </a-tab-pane>
            <a-tab-pane
                :tab="$t(`app.analysis.visits`)"
                key="views">
                <a-row>
                  <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                    <div  class="salesBar">
                      <av-bar
                        :height="292"
                        :title="$t(`app.analysis.visits-trend`)"
                        :data="salesData"
                      />
                    </div>
                  </a-col>
                  <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                    <div class="salesRank">
                      <h4 class="rankingTitle">
                        {{$t(`app.analysis.visits-ranking`)}}
                      </h4>
                      <ul class="rankingList">
                        
                        <li :key='item.title' v-for="(item,i) in rankingListData">
                            <span
                              class="rankingItemNumber"
                              :class="i<3?'active':''"
                            >
                              {{i + 1}}
                            </span>
                            <span class="rankingItemTitle" :title="item.title">
                              {{item.title}}
                            </span>
                            <span class="rankingItemValue">
                              {{$numeral(item.total).format('0,0')}}
                            </span>
                          </li>
                          <!---->
                      </ul>
                    </div>
                  </a-col>
                </a-row>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card
              :bordered="false"
              :title="$t(`app.analysis.online-top-search`)"
              :style="{ 'margin-top': '24px' }"
            >
              <div slot="extra">更多操作</div>
              <a-row :gutter="68">
                <a-col :sm="12" :xs="24" :style="{ 'margin-bottom': '24px' }">
                  <av-number-info :gap="8"
                        :total="$numeral(12321).format('0,0')"
                        status="up"
                        :subTotal="17.1">

                    <span slot="subTitle">
                      {{$t(`app.analysis.search-users`)}}
                      <a-tooltip
                          :title="$t('app.analysis.introduce')"
                        >
                          <a-icon style="margin-left: 8" type="info-circle-o" />
                        </a-tooltip>
                    </span>
                  </av-number-info>
                  <av-mini-area  line style="height: 45px" :data="visitData2" />
                </a-col>
                <a-col :sm="12" :xs="24" :style="{ 'margin-bottom': '24px' }">
                  <av-number-info
                        :gap="8"
                        total="2.7"
                        status="down"
                        :subTotal="26.2">
                    <span slot="subTitle">
                      {{$t(`app.analysis.per-capita-search`)}}
                    </span>
                  </av-number-info>
                  <av-mini-area line style="height: 45px" :data="visitData2" />
                </a-col>
              </a-row>
              <!---->
              <a-table
                :rowKey="(record) => record.index"
                size="small"
                :columns="columns"
                :dataSource="searchData"
                :pagination="{
                  style: { marginBottom: 0 },
                  pageSize: 5,
                }"
              >
                <a href="#/" slot="keyword" slot-scope="text">{{text}}</a>
                <av-trend slot="range" slot-scope="record" :flag="record.status === 1 ? 'down' : 'up'">
                  <span style="margin-right: 4px">{{record.text}}%</span>
                </av-trend>
              </a-table>
            </a-card>
          </a-col>
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card
              class="salesCard"
              :bordered="false"
              :title="$t(`app.analysis.the-proportion-of-sales`)"
              :bodyStyle="{ padding: 24 }"
              :style="{ 'margin-top': '24px', 'min-height': '509px' }"
            >
            <div slot="extra">更多操作</div>
            
            <div style="padding-bottom:15px">
                    <a-radio-group v-model="salesType">
                      <a-radio-button value="all">
                        {{$t(`app.analysis.channel.all`)}}
                      </a-radio-button>
                      <a-radio-button value="online">
                        {{$t(`app.analysis.channel.online`)}}
                      </a-radio-button>
                      <a-radio-button value="stores">
                        {{$t(`app.analysis.channel.stores`)}}
                      </a-radio-button>
                    </a-radio-group>
                  </div>
              <h4 :style="{ marginTop: 8, marginBottom: 32 }">
                {{$t(`app.analysis.sales`)}}
              </h4>
              <av-pie
                hasLegend
                hasLabel
                hasTooltip
                :title="$t(`app.analysis.sales`)"
                :total="this.pieTotal"
                :data="salesPieData"
                style="height:248px"
                :height="400"
                :lineWidth="4"
                showTitle
                :subtitle="`${this.pieTotal}`"
              />
            </a-card>

          </a-col>
    </a-row>
    <a-card
          class="offlineCard"
          :bordered="false"
          :bodyStyle="{ padding: '0 0 32px 0' }"
          style="margin-top: 32px"
        >
          <a-tabs defaultActiveKey="Stores 0" @change="handleTabChange">
            <a-tab-pane
              v-for="(shop) in offlineData"
              :key="shop.name">
              <div slot="tab">
                <a-row :gutter="8" class="row">
                  <a-col :span="12">
                    <av-number-info
                      :title="shop.name"
                      :subTitle="$t(`app.analysis.conversion-rate`)"
                      :gap="2"
                      :total="`${shop.cvr * 100}%`"
                    />
                  </a-col>
                  <a-col :span="12" style="padding-top: 36px">
                    <av-pie
                      :percent="shop.cvr * 100"
                      :color="activeKey !== shop.name?'#BDE4FF':null"
                      :inner="0.55"
                      :height="64"
                    />
                  </a-col>
                </a-row>
              </div>
              <av-timeline-chart
                :columns="['日期', '成本', '利润']"
                  :data="[
          { '日期': '1月1日', '成本': 15, '利润': 12 },
          { '日期': '1月2日', '成本': 12, '利润': 25 },
          { '日期': '1月3日', '成本': 21, '利润': 10 },
          { '日期': '1月4日', '成本': 41, '利润': 32 },
          { '日期': '1月5日', '成本': 31, '利润': 30 },
          { '日期': '1月6日', '成本': 71, '利润': 55 }
        ]"
              ></av-timeline-chart>
            </a-tab-pane>
          </a-tabs>
        </a-card>
        <a-card
          title="echarts"
          :bordered="false"
          :bodyStyle="{ padding: '0 0 32px 0' }"
          style="margin-top: 32px">
        </a-card>
  </div>
</template>


<script  lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import moment from 'moment';

import { getTimeDistance } from '@/util/util';
import {format} from 'date-fns';
import axios from 'axios';

const rankingListDataSource: any[] = [];
for (let i = 0; i < 7; i += 1) {
  rankingListDataSource.push({
    title: `工专路 ${i} 号店`,
    total: 323234,
  });
}

@Component({
  components: {},
})
export default class Analysis extends Vue {
  private rangePickerValue: moment.Moment[] = getTimeDistance('year');

  private rankingListData: any[] = rankingListDataSource;

  private radarData: any[] = [];
  private visitData: any[] = [];
  private offlineChartData: any[] = [];

  private salesType: string = 'all';

  private activeKey: string = 'Stores 0';

  private salesTypeData: any[] = [];

  private salesTypeDataOnline: any[] = [];

  private salesTypeDataOffline: any[] = [];

  private salesData: any[] = [];

  private visitData2: any[] = [];

  private searchData: any[] = [];

  private offlineData: any[] = [];

  constructor() {
    super();
  }

  private handleTabChange(name: string) {
    this.activeKey = name;
  }

  get salesPieData(): any[] {
    let data: any[] = [];
    if (this.salesType === 'all') {
      data = this.salesTypeData;
    } else {
      data = this.salesType === 'online' ? this.salesTypeDataOnline : this.salesTypeDataOffline;
    }

    return data.map( (x: any) => {
      x.item = x.x;
      x.count = x.y;
      return x;
    });
  }

  get pieTotal() {
    return this.salesPieData.reduce((pre: any, now: any) => now.y + pre, 0);
  }


  get columns() {
    return [
      {
        title: this.$t(`app.analysis.table.rank`),
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: this.$t(`app.analysis.table.search-keyword`),
        dataIndex: 'keyword',
        key: 'keyword',
        scopedSlots: {
          customRender: 'keyword',
        },
      },
      {
        title: this.$t(`app.analysis.table.users`),
        dataIndex: 'count',
        key: 'count',
        sorter: (a: any, b: any) => a.count - b.count,
        class: 'alignRight',
      },
      {
        title: this.$t(`app.analysis.table.weekly-range`),
        dataIndex: 'range',
        key: 'range',
        sorter: (a: any, b: any) => a.range - b.range,
        scopedSlots: {
          customRender: 'range',
        },
        align: 'right',
      },
    ];
  }

  get pieChartData() {
    return {
        columns: ['item', 'count'],
        rows: [
          {item: '家用电器', count: 4544},
          {item: '食用酒水', count: 3321},
          {item: '个护健康', count: 3113},
          {item: '服饰箱包', count: 2341},
          {item: '母婴产品', count: 1231},
          {item: '其他', count: 1231},
        ],
    };
  }

  private isActive(type: string) {
    const value = getTimeDistance(type);
    if (!this.rangePickerValue[0] || !this.rangePickerValue[1]) {
      return '';
    }
    if (
      this.rangePickerValue[0].isSame(value[0], 'day') &&
      this.rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return 'currentDate';
    }
    return '';
  }

  private selectDate(type: string) {
    this.rangePickerValue = getTimeDistance(type);
  }

  private handleRangePickerChange(value: any) {
    this.rangePickerValue = value;
  }

  private mounted() {
    const url = '/api/fake_chart_data';
    axios.get(url).then((res: any) => {
            const data = res.data;
            this.visitData = data.visitData;
            this.visitData2 = data.visitData2;
            this.salesData = data.salesData;
            this.searchData = data.searchData;
            this.offlineData = data.offlineData;
            this.offlineChartData = data.offlineChartData;
            this.salesTypeData = data.salesTypeData;
            this.salesTypeDataOnline = data.salesTypeDataOnline;
            this.salesTypeDataOffline = data.salesTypeDataOffline;
            this.radarData = data.radarData;
        });
  }

}
</script>


<style lang="less">
@import "./Analysis.less";
</style>
